import { useState, useEffect } from 'react'
import styles from './styles.less'
import { connect, history } from 'umi';
import QADetail from './QADetail'
import QaPage from './QaPage'



const ProjectQA = (props) => {
    const {
        projectId,
        routeParam,
        queryInitParams,
        dispatch,
        projectPermission
    } = props

    if (routeParam.tab !== 'qa') {
        return <></>;
    }

    if (routeParam.itemId) {
        return <QADetail routeTabKey={routeParam.itemTab} projectId={projectId} projectPermission={projectPermission} qaId={routeParam.itemId} />
    }
    const onQueryParamChange = (params) => {
        dispatch({
            type: 'queryParams/saveQueryParams',
            payload: {
                name: "qaPage",
                params: params
            }
        });
    }

    return <>
        <QaPage onQueryParamChange={onQueryParamChange} projectId={projectId} projectPermission={projectPermission} queryInitParams={queryInitParams}></QaPage>
    </>
}


export default connect(({queryParams }) => ({
    queryInitParams: queryParams.qaPage,
}))(ProjectQA);